<template>
  <div class="Workbench">
    <div class="Workbench-top">
      <div class="Workbench-top-left">
        <div class="left-item" @click="handlerStrip(1)">
          <img
            src="@/assets/images/checkreport.png"
            alt=""
            style="width: 50px; height: 65px"
          />
          检 查 上 报
          <img
            src="@/assets/images/top-arrow.png"
            alt=""
            style="width: 20px; height: 20px"
          />
        </div>
        <div class="left-item" @click="handlerStrip(2)">
          <img
            src="@/assets/images/task-Distribute.png"
            alt=""
            style="width: 50px; height: 65px"
          />
          任 务 下 发
          <img
            src="@/assets/images/bottom-arrow.png"
            alt=""
            style="width: 20px; height: 20px"
          />
        </div>
      </div>
      <div class="Workbench-top-right">
        <div class="right-item">
          <img
            src="@/assets/images/item1.png"
            alt=""
            style="width: 80px; height: 80px"
          />
          <div class="item-content">
            <div class="item-title">重点单位（家）</div>
            <div class="item-num">{{ PageCount.institutionCount }}</div>
          </div>
        </div>
        <div class="right-item">
          <img
            src="@/assets/images/item1.png"
            alt=""
            style="width: 80px; height: 80px"
          />
          <div class="item-content">
            <div class="item-title">检查记录（条）</div>
            <div class="item-num">{{ PageCount.taskCheckCount }}</div>
          </div>
        </div>
        <div class="right-item">
          <img
            src="@/assets/images/item1.png"
            alt=""
            style="width: 80px; height: 80px"
          />
          <div class="item-content">
            <div class="item-title">隐患上报（条）</div>
            <div class="item-num">{{ PageCount.warnDisposalCount }}</div>
          </div>
        </div>
        <div class="right-item">
          <img
            src="@/assets/images/item1.png"
            alt=""
            style="width: 80px; height: 80px"
          />
          <div class="item-content">
            <div class="item-title">检查任务（条）</div>
            <div class="item-num">{{ PageCount.taskCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="Workbench-middle">
      <img
        src="@/assets/images/mes.png"
        alt=""
        style="width: 90px; height: 100px"
      />
      <div class="middle-right" @click="handlerStrip(3)">
        <AutoScroll>
          <template v-slot:content>
            <div
              class="right-msg"
              v-for="(item, index) in messagelist"
              :key="index"
            >
              <div class="msg-text">{{ item.title }} {{ item.message }}</div>
              <div class="mag-time">{{ item.createTime }}</div>
            </div>
          </template>
        </AutoScroll>
      </div>
    </div>
    <div class="Workbench-bottom">
      <Card title="隐患处置">
        <template #content>
          <div class="filter-more">
            <!-- 表格筛选 -->
            <div class="filter">
              <div
                class="filter-item"
                :class="activeindex === 1 ? 'active' : ''"
                @click="handlerfilter(1)"
              >
                <img
                  src="@/assets/images/waitcheck.png"
                  alt=""
                  srcset=""
                  v-if="activeindex === 1"
                />
                <img
                  src="@/assets/images/bluewaitcheck.png"
                  alt=""
                  srcset=""
                  v-else
                />

                <div class="item-text">未处置 （{{ notInspect || 0 }}）</div>
              </div>
              <div
                class="filter-item"
                :class="activeindex === 2 ? 'active' : ''"
                @click="handlerfilter(2)"
              >
                <img
                  src="@/assets/images/check.png"
                  alt=""
                  srcset=""
                  v-if="activeindex === 2"
                />
                <img
                  src="@/assets/images/bluecheck.png"
                  alt=""
                  srcset=""
                  v-else
                />

                <div class="item-text">已处置 （{{ inspected || 0 }}）</div>
              </div>
              <div
                class="filter-item"
                :class="activeindex === 3 ? 'active' : ''"
                @click="handlerfilter(3)"
              >
                <img
                  src="@/assets/images/check.png"
                  alt=""
                  srcset=""
                  v-if="activeindex === 3"
                />
                <img
                  src="@/assets/images/bluecheck.png"
                  alt=""
                  srcset=""
                  v-else
                />

                <div class="item-text">发起的 （{{ firstFlag || 0 }}）</div>
              </div>
            </div>
            <div class="more">
              <el-button type="primary" @click="lookmore" size="small">
                <div style="display: flex; align-items: center">
                  <img
                    src="@/assets/images/more.png"
                    alt=""
                    style="width: 12px; height: 12px"
                  />
                  <span style="margin-left: 5px"> 查看更多</span>
                </div>
              </el-button>
            </div>
          </div>
          <div class="checktable">
            <!-- 表格数据 -->
            <el-table
              v-loading="loading"
              :data="dangerList"
              border
              :header-cell-style="{ 'text-align': 'center' }"
              style="height: 75%"
            >
              <el-table-column label="操作" :show-overflow-tooltip="true">
                <template #default="{ row }">
                  <div class="table-operate">
                    <el-icon
                      title="查看详情"
                      color="#007CEF"
                      class="table-icon"
                      :size="20"
                      @click="handleOperate('detail', row)"
                    >
                      <Document />
                    </el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="处置工单状态"
                prop="checkStatus"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ row.followStatus === 0 ? "未处置" : "已处置" }}
                  <!--                  {{-->
                  <!--                    row.checkStatus == 0-->
                  <!--                      ? "无需处置"-->
                  <!--                      : row.checkStatus == 1-->
                  <!--                      ? "处置中"-->
                  <!--                      : row.checkStatus == 2-->
                  <!--                      ? "已处置"-->
                  <!--                      : ""-->
                  <!--                  }}-->
                </template>
              </el-table-column>
              <el-table-column
                label="检查时间"
                prop="checkDate"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="最新操作时间"
                prop="updateTime"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ row.updateTime || "--" }}
                </template>
              </el-table-column>
              <el-table-column
                label="单位名称"
                prop="name"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ row.name || "--" }}
                </template>
              </el-table-column>
              <el-table-column
                label="行政区划"
                prop="areaName"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="单位类型"
                prop="institutionType"
                :show-overflow-tooltip="true"
                width="180"
              >
              </el-table-column>
              <el-table-column
                label="检查单位"
                prop="policeStationName"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="不达标/达标事项"
                prop="policeStationName"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <span style="color: #e7350f">{{ row.notStandard }}</span
                  >项/ <span style="color: #2f9a78">{{ row.standard }}</span
                  >项
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </Card>
    </div>
    <!-- 检查记录详情 -->
    <el-dialog
      v-model="showdialog"
      width="1000px"
      append-to-body
      class="dialogBox"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="header-title">检查记录详情</div>
        </div>
      </template>
      <Taskdtl
        ref="taskdetailref"
        pageType="danger"
        v-if="showdialog"
      ></Taskdtl>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="success"
            v-if="[2].includes(userStore.deptType) && rowdata.followStatus == 0"
            @click="handlerTaskDisposal(1)"
            >办理</el-button
          >
          <el-button
            type="warning"
            v-if="[1].includes(userStore.deptType) && rowdata.followStatus == 0"
            @click="handlerTaskDisposal(4)"
            >复核</el-button
          >
          <el-button
            color="#626aef"
            :dark="true"
            v-if="
              userStore.cityId &&
              [0].includes(userStore.deptType) &&
              rowdata.followStatus == 0
            "
            @click="handlerTaskDisposal(3)"
            >上报</el-button
          >
          <el-button
            type="info"
            v-if="[0].includes(userStore.deptType) && rowdata.followStatus == 0"
            @click="handlerTaskDisposal(0)"
            >转派</el-button
          >
          <el-button
            type="danger"
            v-if="[2].includes(userStore.deptType) && rowdata.followStatus == 0"
            @click="handlerTaskDisposal(2)"
            >退回</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 操作弹窗 -->
    <el-dialog
      v-model="showoperdialog"
      width="800px"
      append-to-body
      class="dialogBox"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <img src="@/assets/images/title-card.png" alt="" />
          <div class="header-title">{{ dialogtitle }}</div>
        </div>
      </template>

      <div class="ope-content" v-if="showoperdialog">
        <el-form
          :model="operateform"
          ref="operateformRef"
          :rules="queryRules"
          label-width="130px"
          label-position="top"
        >
          <!-- 办理 -->
          <div v-if="operateform.operationType == 1">
            <el-form-item label="处理意见：" prop="content" label-width="130">
              <el-input
                v-model="operateform.content"
                type="textarea"
                rows="4"
                maxlength="100"
                placeholder="请填写"
              ></el-input>
            </el-form-item>
            <el-form-item label="相关照片：" prop="picList" label-width="130">
              <el-input v-model="operateform.picList" v-show="false"></el-input>
              <div>
                <div class="form-upload">
                  <div>
                    <el-upload
                      ref="uploadRef"
                      :action="uploadUrl"
                      :show-file-list="false"
                      accept=".png,.jpg,.jpeg"
                      multiple
                      :headers="myHeaders"
                      :on-success="uploadSuccess"
                      :before-upload="beforeUpload"
                    >
                      <img
                        src="@/assets/images/upload-images.png"
                        alt=""
                        ref="imgRef"
                      />
                    </el-upload>
                    <el-progress
                      v-if="isUpload"
                      status="success"
                      :percentage="100"
                      :format="format"
                      :indeterminate="true"
                      style="width: 80%"
                    />
                  </div>

                  <div class="tooltip">
                    <span>请上传JPG/PNG/JPEG格式文件</span>
                    <span>建议大小小于5M</span>
                    <span>最多上传5张</span>
                  </div>
                </div>
                <div class="upload-pics">
                  <div
                    class="pic"
                    v-for="(item, index) in picList"
                    :key="index"
                  >
                    <img :src="item.url" :alt="item.name" />
                    <div class="operate">
                      <span style="cursor: pointer" @click="replacepic(index)"
                        >替换</span
                      >
                      <span>|</span>
                      <span style="cursor: pointer" @click="delpic(index)"
                        >删除</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- 转派 -->
          <div v-if="operateform.operationType == 0">
            <el-form-item label="主管单位：" prop="deptIds" label-width="130">
              <el-select
                v-model="operateform.deptIds"
                placeholder="请选择主管单位"
                clearable
                style="width: 100%"
                @change="deptIdsHandle"
              >
                <el-option
                  v-for="dict in chargeList"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId * 1"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="处理意见：" prop="content" label-width="130">
              <el-input
                v-model="operateform.content"
                type="textarea"
                rows="4"
                maxlength="100"
                placeholder="请填写"
              ></el-input>
            </el-form-item>
          </div>
          <!-- 上报和退回 -->
          <div
            v-if="
              operateform.operationType == 2 || operateform.operationType == 3
            "
          >
            <el-form-item label="处理意见：" prop="content" label-width="130">
              <el-input
                v-model="operateform.content"
                type="textarea"
                rows="4"
                maxlength="100"
                placeholder="请填写"
              ></el-input>
            </el-form-item>
          </div>
          <!-- 复核 -->
          <div v-if="operateform.operationType == 4">
            <el-form-item
              label="处理结果："
              prop="businessResult"
              label-width="130"
            >
              <el-radio-group v-model="operateform.businessResult">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="处理意见：" prop="content" label-width="130">
              <el-input
                v-model="operateform.content"
                type="textarea"
                rows="4"
                maxlength="100"
                placeholder="请填写"
              ></el-input>
            </el-form-item>
            <el-form-item label="相关照片：" prop="picList" label-width="130">
              <div class="form-upload">
                <el-input
                  v-model="operateform.picList"
                  v-show="false"
                ></el-input>
                <div>
                  <el-upload
                    ref="uploadRef"
                    :action="uploadUrl"
                    :show-file-list="false"
                    accept=".png,.jpg,.jpeg"
                    :limit="10"
                    multiple
                    :headers="myHeaders"
                    :on-success="uploadSuccess"
                    :before-upload="beforeUpload"
                  >
                    <img
                      src="@/assets/images/upload-images.png"
                      alt=""
                      ref="imgRef"
                    />
                  </el-upload>
                  <el-progress
                    v-if="isUpload"
                    status="success"
                    :percentage="100"
                    :format="format"
                    :indeterminate="true"
                    style="width: 80%"
                  />
                </div>

                <div class="tooltip">
                  <span>请上传JPG/PNG/JPEG格式文件</span>
                  <span>建议大小小于5M</span>
                  <span>最多上传5张</span>
                </div>
              </div>
              <div class="upload-pics">
                <div class="pic" v-for="(item, index) in picList" :key="index">
                  <img :src="item.url" :alt="item.name" />
                  <div class="operate">
                    <span style="cursor: pointer" @click="replacepic(index)"
                      >替换</span
                    >
                    <span>|</span>
                    <span style="cursor: pointer" @click="delpic(index)"
                      >删除</span
                    >
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleoperateSave">确 定</el-button>
          <el-button @click="handlerback">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import AutoScroll from "@/components/Autoscroll/autoscroll.vue";
import Card from "@/components/Card";
import Taskdtl from "./task/taskdtl";
import {
  getWarnList,
  updateTaskDisposal,
  WarnDisposalCount,
} from "@/api/danger/danger";
import { gethistMessagelist } from "@/api/message/message";
import { selectDeptListByUser } from "@/api/erp/unit";
import { getHomePageCount } from "@/api/index/index";
import { getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
import { useRouter } from "vue-router";
const router = useRouter();

const userStore = useUserStore();

// 表格加载效果
const loading = ref(false);
// 项目列表
const dangerList = ref([]);
// 搜索参数
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  tempStatus: 1,
});
// 总数
const total = ref(0);
//详情组件的引用
const taskdetailref = ref(null);
//选中的项
let activeindex = ref(1);

// 详情弹窗的显隐
let showdialog = ref(false);
//操作弹窗的显隐
let showoperdialog = ref(false);

//主管单位下拉
const chargeList = ref([]);

//处置任务的引用
const operateformRef = ref(null);

let operateform = ref({
  // 操作业务类型 ：0-转派；1-办理 2-退回 3-上报 4-复核
  operationType: "",
  nodeTaskDisposalId: "",
  deptIds: "",
});
//图片校验规则
const picsValidate = (rule, value, callback) => {
  if (!operateform.value.picList || operateform.value.picList == 0) {
    callback(new Error("请上传图片"));
  } else {
    callback();
  }
};
const queryRules = ref({
  content: [{ required: true, message: "请输入处理意见", trigger: "blur" }],
  deptIds: [{ required: true, message: "请选择主管单位！", trigger: "change" }],
  businessResult: [
    { required: true, message: "请选择处理结果！", trigger: "change" },
  ],
  picList: [
    {
      required: true,
      validator: picsValidate,
      trigger: "change",
    },
  ],
});

let isUpload = ref(false);
//上传图片的地址
const uploadUrl = import.meta.env.VITE_APP_BASE_API + "/file/upload";

const myHeaders = ref({
  Authorization: "Bearer " + getToken(),
});

let picList = ref([]);

//上传的状态
let uploadstatus = ref("add");
let replaceindex = ref(0);
let indexToReplace = ref(0);
const format = (percentage) =>
  percentage === 100 ? "上传中……" : `${percentage}%`;
const uploadSuccess = (res) => {
  console.log("chenggon", res);
  if (res.code == 200) {
    ElMessage.success("图片上传成功！");
    isUpload.value = false;
    if (uploadstatus.value == "add") {
      picList.value.push(res.data);
      operateform.value.picList = picList.value.length;
    } else {
      console.log("zhixing");
      picList.value.splice(indexToReplace.value, 1, res.data);
      operateform.value.picList = picList.value.length;
      uploadstatus.value = "add";
    }
  } else {
    isUpload.value = false;
    ElMessage.error("文件上传失败！");
  }
};

function beforeUpload(file) {
  console.log("file", file);
  if (picList.value.length > 4) {
    ElMessage.error(`最多只能上传5张图片`);
    return false;
  }
  if (file.name.length > 50) {
    ElMessage.error(`文件名过长！最多只能上传50个文字的文件名文件！`);
    return false;
  }
  isUpload.value = true;
}

/*
 * 转派--主管单位条件限制
 * */
const deptIdsHandle = (val) => {
  console.log("val", val);
  let obj = chargeList.value.find((item) => item.deptId === val);
  console.log("obj", obj);
  console.log("rowdata.value", rowdata.value);
  if (obj.industryManagementId != rowdata.value.industryId) {
    operateform.value.deptIds = "";
    ElMessage.error(`行业不匹配，请重新选择`);
  }
};

/**
 * @description: 替换图片
 */
let uploadRef = ref(null);
const replacepic = (index) => {
  uploadstatus.value = "replace";
  indexToReplace.value = index;
  uploadRef.value.$el.querySelector("input").click();
};
/**
 * @description: 删除图片
 */
const delpic = (index) => {
  picList.value.splice(index, 1);
  operateform.value.picList = picList.value.length;
};

/**
 * @description: 表格数据接口
 */
const getdangerlist = (id) => {
  loading.value = true;
  params.institutionId = id;
  getWarnList(
    { pageNum: params.pageNum, pageSize: params.pageSize },
    params
  ).then((res) => {
    dangerList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
};

/**
 * @description: tab操作
 */
const handlerfilter = (index) => {
  activeindex.value = index;
  // if (index === "1") {
  //   params.followStatus = "";
  //   params.firstFag = index;
  // } else {
  //   params.firstFag = "";
  //   params.followStatus = index;
  // }
  params.tempStatus = index;

  getdangerlist();
};

/**
 * @description: 状态数据
 */
let firstFlag = ref(0);
let inspected = ref(0);
let notInspect = ref(0);
const getWarnDisposalCount = () => {
  WarnDisposalCount(
    { pageNum: params.pageNum, pageSize: params.pageSize },
    {}
  ).then((res) => {
    firstFlag.value = res.data.firstFlag;
    inspected.value = res.data.inspected;
    notInspect.value = res.data.notInspect;
  });
};

/**
 * @description: 表格操作
 * @param {String} type 类型
 * @param {Object} row  当前行数据
 */
let rowdata = ref({});
const handleOperate = async (type, row) => {
  switch (type) {
    case "detail":
      rowdata.value = row;
      showdialog.value = true;
      nextTick(() => {
        taskdetailref.value.handleDetailInfo(row, true);
      });
      break;

    default:
      break;
  }
};

/**
 * @description:  处置任务操作
 */
let dialogtitle = ref("");
const handlerTaskDisposal = (type) => {
  switch (type) {
    case 0:
      dialogtitle.value = "转派";
      break;
    case 1:
      dialogtitle.value = "办理";
      break;
    case 2:
      dialogtitle.value = "退回";
      break;
    case 3:
      dialogtitle.value = "上报";
      break;
    case 4:
      dialogtitle.value = "复核";
      break;

    default:
      break;
  }
  operateform.value.operationType = type;
  showoperdialog.value = true;
};

/**
 * @description:  处置任务保存
 */
const handleoperateSave = () => {
  operateformRef.value.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          let obj = JSON.parse(JSON.stringify(operateform.value));
          obj.nodeTaskDisposalId = rowdata.value.nodeTaskDisposalId;
          if (operateform.value.operationType == 0) {
            obj.deptIds = [operateform.value.deptIds];
          } else {
            obj.deptIds = [];
          }
          obj.taskId = rowdata.value.taskId;
          obj.taskDisposalId = rowdata.value.taskDisposalId;
          obj.institutionName = rowdata.value.name;
          if (
            operateform.value.operationType == 1 ||
            operateform.value.operationType == 4
          ) {
            obj.fileList = picList.value;
          }
          updateTaskDisposal(obj).then((res) => {
            if (res.code == 200) {
              ElMessage.success(res.msg);
              showoperdialog.value = false;
              showdialog.value = false;
              operateform.value = {
                operationType: "",
                nodeTaskDisposalId: "",
                deptIds: "",
              };
              getWarnDisposalCount();
              getdangerlist();
              resetdialogdata();
            } else {
              ElMessage.error(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  });
};

/**
 * @description:  取消
 */
const handlerback = () => {
  showoperdialog.value = false;
  resetdialogdata();
};

/**
 * @description:  重置数据
 */
const resetdialogdata = () => {
  operateform.value = {
    // 操作业务类型 ：0-转派；1-办理 2-退回 3-上报 4-复核
    operationType: "",
    nodeTaskDisposalId: "",
    deptIds: "",
  };
  picList.value = [];
};

/**
 * @description:  获取检查单位
 * @param {Number} id
 */
const getpolicestation = (deptType) => {
  let obj = {
    deptType: deptType,
    provinceId: userStore.provinceId,
    cityId: userStore.cityId,
    zoneId: userStore.zoneId,
    streetId: userStore.streetId,
  };
  selectDeptListByUser(obj).then((res) => {
    if (deptType == 1) {
      policeList.value = res.data;
    } else {
      chargeList.value = res.data;
    }
  });
};
/**
 * @description:  查看更多
 */
const lookmore = () => {
  router.push("/danger");
};

/**
 * @description:  各数值统计
 */
let PageCount = ref({});
const HomePageCount = () => {
  getHomePageCount().then((res) => {
    PageCount.value = res.data;
  });
};
/**
 * @description:  处理跳转
 */
const handlerStrip = (type) => {
  switch (type) {
    case 1:
      router.push({
        path: "/erp",
      });
      break;
    case 2:
      router.push({
        path: "/task",
        query: {
          indexStrip: true,
        },
      });
      break;
    case 3:
      router.push({
        path: "/message",
      });
      break;
    default:
      break;
  }
};

/**
 * @description: 消息数据接口
 */
let messagelist = ref([]);
const getMessagelist = () => {
  loading.value = true;
  gethistMessagelist({ pageNum: 1, pageSize: 5 }, {}).then((res) => {
    messagelist.value = res.rows;
  });
};

onMounted(() => {
  getdangerlist();
  getWarnDisposalCount();
  getpolicestation(2);
  HomePageCount();
  getMessagelist();
});
</script>

<style scoped lang="scss">
.Workbench {
  height: 80vh;
  .Workbench-top {
    display: flex;
    margin-bottom: 20px;
    .Workbench-top-left {
      width: 24%;
      .left-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 80px;
        margin-right: 10px;
        padding: 0 30px;
        font-weight: 500;
        font-size: 30px;
        color: #ffffff;
        cursor: pointer;
      }
      .left-item:nth-child(1) {
        background: url("@/assets/images/bac1.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 10px;
      }
      .left-item:nth-child(2) {
        background: url("@/assets/images/bac2.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .Workbench-top-right {
      display: flex;
      justify-content: space-around;
      width: 76%;
      background: url("@/assets/images/bac3.png") no-repeat;
      background-size: 100% 100%;
      .right-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .item-content {
          margin-left: 15px;
          .item-title {
            font-weight: 500;
            font-size: 24px;
            color: #ffffff;
          }
          .item-num {
            font-weight: 400;
            font-size: 36px;
            color: #ffffff;
            font-family: "DigifaceWide";
          }
        }
      }
    }
  }
  .Workbench-middle {
    display: flex;
    background: #ffffff;
    border-radius: 10px;
    height: 130px;
    padding: 15px 40px;
    .middle-right {
      cursor: pointer;
      width: 100%;
      margin-left: 40px;
      .right-msg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
      }
    }
  }
  .Workbench-bottom {
    height: 56%;
    margin-top: 20px;
    .filter-more {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .filter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 400px;
        background: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(51, 51, 51, 0.1);
        border-radius: 20px;
        font-size: 14px;
        padding: 2px;
        margin: 5px 0;
        .filter-item {
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 5px 15px;
          border-radius: 20px;
          color: #7eb7fe;
          img {
            height: 16px;
            margin-right: 2px;
          }
        }
        .active {
          background-color: #4aa1fe;
          color: #ffffff;
        }
      }
    }
    .checktable {
      height: 100%;
    }
  }
}
.ope-content {
  padding: 10px 30px 20px 30px;
  .form-upload {
    display: flex;
    .tooltip {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 66px;
      font-size: 14px;
      color: #999999;
      margin-left: 20px;
    }
  }
  .upload-pics {
    display: flex;
    margin-top: 20px;
    width: 800px;
    flex-wrap: wrap;
    .pic {
      position: relative;
      width: 160px;
      height: 100px;
      display: flex;
      justify-content: center;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
      .operate {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        bottom: 10px;
        margin: 0 auto;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        width: 120px;
        height: 30px;
      }
    }
  }
}
</style>
